<template>
	<view class="page">
		<view class="wallet-top">
			<view class="title">{{i18n.assetConversion}} <text class="iconfont" @click="hide()">{{wallflay == true ? '&#xe648;': '&#xe635;'}}</text></view>
			<view class="num">{{wallflay == true ? data.sum_cny: '******'}}  <text class="cny">CNY</text></view>
			<view class="heji">{{i18n.conversion}} {{wallflay == true ? data.sum_dollar: '******'}} USDT</view>
		</view>
		<view class="wallet-fun">
			<navigator class="list" hover-class="none" url="recharge">
				<image src="../../static/img/indexImg/chongzhi2.png" class="img" mode="aspectFill"></image>
				<view class="tit">{{i18n.topUp}}</view>
			</navigator>
			<navigator class="list" hover-class="none" url="withdraw">
				<image src="../../static/img/indexImg/tibi2.png" class="img" mode="aspectFill"></image>
				<view class="tit">{{i18n.withdraw}}</view>
			</navigator>
			<navigator class="list" hover-class="none" url="transfer">
				<image src="../../static/img/indexImg/zhuanzhang2.png" class="img" mode="aspectFill"></image>
				<view class="tit">{{i18n.transfer}}</view>
			</navigator>
			<navigator class="list" hover-class="none" url="exchange">
				<image src="../../static/img/indexImg/zhuanzhang2.png" class="img" mode="aspectFill"></image>
				<view class="tit">{{i18n.exchange}}</view>
			</navigator>
		</view>
		<view class="wallet-coin">
			<navigator class="list" v-for="(item,index) in data.coins" :key="index" hover-class="none" :url="
					'coin?coin_name='+item.coin_name+
					'&money='+item.money+
					'&freeze='+item.freeze+
					'&is_recharge='+(item.is_recharge || 0)+
					'&is_transfer='+(item.is_transfer || 0)+
					'&is_withdraw='+(item.is_withdraw || 0)+
					'&sum_cny='+item.sum_cny+
					'&id='+item.id">
				<image :src="item.image" class="img" mode="aspectFill"></image>
				<view class="tit">{{item.coin_name}}</view>
				<view class="price">
					<view class="num">{{item.money}}</view>
					<view class="cny-num">≈ {{item.sum_cny}} CNY</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			    wallflay:true,
				data:{}
			}
		},
		onShow() {
			this.$setTabBarLang()
           this.getWallet()
		   uni.setNavigationBarTitle({
		    title: this.$t('wallet.assets')
		   })
		},
		computed:{
			i18n() {
				return this.$t('wallet');
			}
		},
		created() {
			this.wallflay = this.$getStore('wallflay',true) || true
		},
		methods: {
           hide(){
			   this.wallflay = !this.wallflay
			   this.$setStore('wallflay', this.wallflay, true)
		   },
		   getWallet() {
				this.data = this.$getStore('funds_wallet',true)
				this.$post('api/funds/account').then(res => {
						this.data = res.data
						this.$setStore('funds_wallet', res.data, true)
				})
		   },
		   
		}
	}
</script>

<style lang="less" scoped>
	.wallet-top{
		padding: 20upx 0 50upx;
		background-color: var(--block-color);
		.title{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			.iconfont{
				color: var(--txt-color);
				font-size:36upx;
				margin-left: 10upx;
			}
		}
		.num{
			text-align: center;
			font-size: 60upx;
			font-weight: bold;
			margin: 20upx 0 10upx;
			.cny{
				font-size: 24upx;
				font-weight: normal;
				margin-left: 10upx;
			}
		}
		.heji{
			text-align: center;
			font-size: 24upx;
			color: var(--txt-color);
		}
	}	
	
	.wallet-fun{
		padding: 40upx 15upx;
		display: flex;
		.list{
			flex: 1;
			margin: 0 15upx;
			background-color: var(--block-color);
			text-align: center;
			padding: 30upx 0;
			border-radius: 10upx;
			.img{
				width: 50upx;
				height: 50upx;
			}
			.tit{
				font-size: 26upx;
				color: var(--txt-color);
			}
		}
	}
	.wallet-coin{
		padding: 0 30upx;
		.list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx;
			background-color:var(--block-color);
			border-radius: 10upx;
			margin-bottom: 30upx;
			.img{
				width: 60upx;
				height: 60upx;
			}
			.tit{
				flex: 1;
				margin-left: 30upx;
				font-size: 32upx;
			}
			.price{
				text-align: right;
				.num{
					font-size: 32upx;
				}
				.cny-num{
					font-size: 24upx;
					color:var(--txt-color);
				}
			}
		}
	}
	
	
</style>
